<template>
  <MyCard v-if="showPage" title="个人信息" style="height: 100%" back>
    <el-form :model="form" style="margin-top: 1em">
      <el-form-item :label="'姓&nbsp&nbsp&nbsp名'">
        <el-input :disabled="!updateMode" v-model="form.userName" maxlength="30" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input :disabled="!updateMode" v-model="form.phone" maxlength="20" show-word-limit></el-input>
      </el-form-item>
      <el-form-item :label="'邮&nbsp&nbsp&nbsp箱'">
        <el-input :disabled="!updateMode" v-model="form.email" maxlength="50" show-word-limit></el-input>
      </el-form-item>
      <el-form-item :label="'性&nbsp&nbsp&nbsp别'">
        <el-select :disabled="!updateMode" v-model="form.selectGender">
          <el-option v-for="(item) in genderSelectArray" :value="item" :label="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="'签&nbsp&nbsp&nbsp名'">
        <el-input :disabled="!updateMode" v-model="form.signature" autosize maxlength="30" show-word-limit></el-input>
      </el-form-item>
      <el-form-item v-if="updateMode" :label="'密&nbsp&nbsp&nbsp码'">
        <el-button type="primary" link @click="showChangePassword=true">点击更新密码</el-button>
      </el-form-item>
      <el-form-item v-if="!updateMode">
        <el-button @click="updateMode=true">修改信息</el-button>
      </el-form-item>
      <el-form-item v-else>
        <el-button class="target_btn" type="primary" @click="showCommit=true">提交</el-button>
        <el-button type="info" @click="updateMode=false">取消</el-button>
      </el-form-item>
    </el-form>
  </MyCard>

  <el-dialog v-model="showError" title="错误">
    {{ err }}
  </el-dialog>

  <el-dialog v-model="showCommit" title="提示">
    <p>确认提交修改？</p>
    <el-button type="primary" @click="confirmFunction">确认</el-button>
    <el-button type="info" @click="showCommit=false">取消</el-button>
  </el-dialog>

  <el-dialog v-model="showSuccess" title="提示" @close="updatePage">
    <p>修改成功！</p>
  </el-dialog>

  <!--修改密码弹窗-->
  <el-dialog v-model="showChangePassword" title="修改密码">
    <el-form :model="changePasswordForm" ref="passwordRuleRef" :rules="passwordRule">
      <el-form-item :label="'请输入原密码&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'" prop="nowPassword">
        <el-input v-model="changePasswordForm.nowPassword" show-password maxlength="20" show-word-limit></el-input>
      </el-form-item>
      <el-form-item :label="'请输入新密码&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'" prop="newPassword">
        <el-input v-model="changePasswordForm.newPassword" show-password maxlength="20" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="请再次输入新密码" prop="rePassword">
        <el-input v-model="changePasswordForm.rePassword" show-password maxlength="20" show-word-limit></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="confirmChangePassword(passwordRuleRef)">提交</el-button>
        <el-button @click="showChangePassword=false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import MyCard from "../../../components/MyCard.vue";
import { User} from "../../../types/mytypes";
import {UserStore} from "../../../store/store";
import {onMounted, reactive, ref} from "vue";
import {UserRequest} from "../../../request/MyRequset";
import {FormInstance, FormRules} from "element-plus";

let showPage = ref(false)
let err = ref('')
let showError = ref(false)
let showCommit = ref(false)
let showSuccess = ref(false)
let showChangePassword = ref(false)
//获取当前登录的用户
let user: User = reactive({} as User);
//是否开启修改模式
let updateMode = ref(false)
//性别map
const genderSelectArray: string[] = reactive([
  "未知", "女", "男"
])
//表单响应式数据
let form: {
  userName: string;
  phone: string;
  email: string;
  gender: number;
  selectGender: string;
  signature: string | undefined;
  password: string;
};
let changePasswordForm = reactive({
  nowPassword: "",
  newPassword: "",
  rePassword: ""
})
let passwordRuleRef = ref<FormInstance>()
let passwordRule = reactive<FormRules>({
  nowPassword: [
    {required: true, message: "不能为空"},
    {
      asyncValidator: (rule, value) => {
        return new Promise((resolve, reject) => {
          if (value !== user.password) {
            reject("输入错误，请输入当前的密码")
          } else {
            resolve();
          }
        })
      }
    }
  ],
  newPassword: [
    {required: true, message: "不能为空"},

  ],
  rePassword: [
    {required: true, message: "不能为空"},
    {
      asyncValidator: (rule, value) => {
        return new Promise((resolve, reject) => {
          if (value !== changePasswordForm.newPassword) {
            reject("两次输入的密码不一致")
          } else {
            resolve();
          }
        })
      }
    }
  ]
})

onMounted(() => {
  initData();
  showPage.value = true
})
const initData = () => {
  user = UserStore.getUser();
  form = reactive({
    userName: user.name,
    phone: user.phone,
    email: user.email,
    gender: user.gender,
    selectGender: genderSelectArray[user.gender + 1],
    signature: user.signature,
    password: user.password
  })
}
const updatePage = async () => {
  showPage.value = false;
  let newUser = (await UserRequest.getById(user.id)).data;
  UserStore.setUser(newUser);
  showCommit.value = false;
  showSuccess.value = false;
  showError.value = false;
  showChangePassword.value = false
  updateMode.value = false;
  initData();
  showPage.value = true
}

//确认修改密码函数
const confirmChangePassword = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      let res = await UserRequest.updatePassword(user.id, changePasswordForm.newPassword);
      if (res.suc) {
        showSuccess.value = true
      } else {
        showError.value = true
        err.value = res.message
      }
    }
  })
}

//确认修改信息函数
const confirmFunction = async () => {
  let index = 0;
  for (index; index < genderSelectArray.length; index++) {
    if (genderSelectArray[index] === form.selectGender) {
      break;
    }
  }
  let updateRes = await UserRequest.updateInfo(user.id, form.userName, form.phone, form.email, index - 1, form.signature as string);
  if (updateRes.suc) {
    showSuccess.value = true
  } else {
    err.value = updateRes.message;
    showError.value = true;
  }
}
</script>

<style scoped lang="scss">

</style>